{% extends "_layout.html" %}

{# 样式代码 #}
{% block style %}
    <link href="{{ ctx.app.config.staticUrl }}/css/index.css" rel="stylesheet" >
    <link href="{{ ctx.app.config.staticUrl }}/css/swiper.css" rel="stylesheet" >
{% endblock %}

{# body代码#}
{% block body %}
    <!--container start-->
    <div class="container_index" id="index">
        <div class="container">
            <div class="title text-center">今日预订主题套餐</div>
            <div class="intro">每一份餐品，都是我们的匠心制作；每一个主题，都是美食生动的灵魂。食艺道针对商务人士定期推出限量午餐，温暖您的同时，更能让您体会到美食与艺术的结合。为保证您的最佳用餐体验，确保品尝到的每份餐品都是至臻享受，目前只接受用餐前一天在线订购，谢谢配合。</div>
            <ul class="delicious_list">
                <li class="delicious_item">
                    <div class="delicious_left">
                        <div class="swiper-container swiper-delicious">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide"><img src="{{ ctx.app.config.staticUrl }}/images/delicious_01.png"/></div>
                                <div class="swiper-slide"><img src="{{ ctx.app.config.staticUrl }}/images/delicious_02.png"/></div>
                                <div class="swiper-slide"><img src="{{ ctx.app.config.staticUrl }}/images/delicious_03.png"/></div>
                                <div class="swiper-slide"><img src="{{ ctx.app.config.staticUrl }}/images/delicious_05.png"/></div>
                                <div class="swiper-slide"><img src="{{ ctx.app.config.staticUrl }}/images/delicious_06.png"/></div>
                            </div>
                            <div class="swiper-pagination"></div>
                        </div>
                    </div>
                    <div class="delicious_right">
                        <div class="delicious_title">「前菜」</div>
                        <div class="delicious_name">草莓星冰乐</div>
                        <p class="delicious_intro">每一份餐品，都是我们的匠心制作；每一个主题，都是美食生动的灵魂。食艺道针对商务人士定期推出限量午餐，温暖您的同时，更能让您体会到美食与艺术的结合。为保证您的最佳用餐体验，确保品尝到的每份餐品都是至臻享受，目前只接受用餐前一天在线订购，谢谢配合。</p>
                        <ul class="icon_list fn-right">
                            <li class="icon_item">
                                <a href="javascript:void(0);" data-img="{{ ctx.app.config.staticUrl }}/images/food_material.png" onclick="popUpFood(this)"></a>
                            </li>
                            <li class="icon_item">
                                <a href="javascript:void(0);" data-img="{{ ctx.app.config.staticUrl }}/images/food_material.png" onclick="popUpFood(this)"></a>
                            </li>
                            <li class="icon_item">
                                <a href="javascript:void(0);" data-img="{{ ctx.app.config.staticUrl }}/images/food_material.png" onclick="popUpFood(this)"></a>
                            </li>
                            <li class="icon_item">
                                <a href="javascript:void(0);" data-img="{{ ctx.app.config.staticUrl }}/images/food_material.png" onclick="popUpFood(this)"></a>
                            </li>
                        </ul>
                    </div>
                </li>
                <li class="delicious_item">
                    <div class="delicious_left">
                        <div class="swiper-container swiper-delicious">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide"><img src="{{ ctx.app.config.staticUrl }}/images/delicious_01.png"/></div>
                                <div class="swiper-slide"><img src="{{ ctx.app.config.staticUrl }}/images/delicious_02.png"/></div>
                                <div class="swiper-slide"><img src="{{ ctx.app.config.staticUrl }}/images/delicious_03.png"/></div>
                                <div class="swiper-slide"><img src="{{ ctx.app.config.staticUrl }}/images/delicious_05.png"/></div>
                                <div class="swiper-slide"><img src="{{ ctx.app.config.staticUrl }}/images/delicious_06.png"/></div>
                            </div>
                            <div class="swiper-pagination"></div>
                        </div>
                    </div>
                    <div class="delicious_right">
                        <div class="delicious_title">「前菜」</div>
                        <div class="delicious_name">草莓星冰乐</div>
                        <p class="delicious_intro">每一份餐品，都是我们的匠心制作；每一个主题，都是美食生动的灵魂。食艺道针对商务人士定期推出限量午餐，温暖您的同时，更能让您体会到美食与艺术的结合。为保证您的最佳用餐体验，确保品尝到的每份餐品都是至臻享受，目前只接受用餐前一天在线订购，谢谢配合。</p>
                        <ul class="icon_list fn-right">
                            <li class="icon_item">
                                <a href="javascript:void(0);" data-img="{{ ctx.app.config.staticUrl }}/images/food_material.png" onclick="popUpFood(this)"></a>
                            </li>
                            <li class="icon_item">
                                <a href="javascript:void(0);" data-img="{{ ctx.app.config.staticUrl }}/images/food_material.png" onclick="popUpFood(this)"></a>
                            </li>
                            <li class="icon_item">
                                <a href="javascript:void(0);" data-img="{{ ctx.app.config.staticUrl }}/images/food_material.png" onclick="popUpFood(this)"></a>
                            </li>
                            <li class="icon_item">
                                <a href="javascript:void(0);" data-img="{{ ctx.app.config.staticUrl }}/images/food_material.png" onclick="popUpFood(this)"></a>
                            </li>
                        </ul>
                    </div>
                </li>
                <li class="delicious_item">
                    <div class="delicious_left">
                        <div class="swiper-container swiper-delicious">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide"><img src="{{ ctx.app.config.staticUrl }}/images/delicious_01.png"/></div>
                                <div class="swiper-slide"><img src="{{ ctx.app.config.staticUrl }}/images/delicious_02.png"/></div>
                                <div class="swiper-slide"><img src="{{ ctx.app.config.staticUrl }}/images/delicious_03.png"/></div>
                                <div class="swiper-slide"><img src="{{ ctx.app.config.staticUrl }}/images/delicious_05.png"/></div>
                                <div class="swiper-slide"><img src="{{ ctx.app.config.staticUrl }}/images/delicious_06.png"/></div>
                            </div>
                            <div class="swiper-pagination"></div>
                        </div>
                    </div>
                    <div class="delicious_right">
                        <div class="delicious_title">「前菜」</div>
                        <div class="delicious_name">草莓星冰乐</div>
                        <p class="delicious_intro">每一份餐品，都是我们的匠心制作；每一个主题，都是美食生动的灵魂。食艺道针对商务人士定期推出限量午餐，温暖您的同时，更能让您体会到美食与艺术的结合。为保证您的最佳用餐体验，确保品尝到的每份餐品都是至臻享受，目前只接受用餐前一天在线订购，谢谢配合。</p>
                        <ul class="icon_list fn-right">
                            <li class="icon_item">
                                <a href="javascript:void(0);" data-img="{{ ctx.app.config.staticUrl }}/images/food_material.png" onclick="popUpFood(this)"></a>
                            </li>
                            <li class="icon_item">
                                <a href="javascript:void(0);" data-img="{{ ctx.app.config.staticUrl }}/images/food_material.png" onclick="popUpFood(this)"></a>
                            </li>
                            <li class="icon_item">
                                <a href="javascript:void(0);" data-img="{{ ctx.app.config.staticUrl }}/images/food_material.png" onclick="popUpFood(this)"></a>
                            </li>
                            <li class="icon_item">
                                <a href="javascript:void(0);" data-img="{{ ctx.app.config.staticUrl }}/images/food_material.png" onclick="popUpFood(this)"></a>
                            </li>
                        </ul>
                    </div>
                </li>
                <li class="delicious_item">
                    <div class="delicious_left">
                        <div class="swiper-container swiper-delicious">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide"><img src="{{ ctx.app.config.staticUrl }}/images/delicious_01.png"/></div>
                                <div class="swiper-slide"><img src="{{ ctx.app.config.staticUrl }}/images/delicious_02.png"/></div>
                                <div class="swiper-slide"><img src="{{ ctx.app.config.staticUrl }}/images/delicious_03.png"/></div>
                                <div class="swiper-slide"><img src="{{ ctx.app.config.staticUrl }}/images/delicious_05.png"/></div>
                                <div class="swiper-slide"><img src="{{ ctx.app.config.staticUrl }}/images/delicious_06.png"/></div>
                            </div>
                            <div class="swiper-pagination"></div>
                        </div>
                    </div>
                    <div class="delicious_right">
                        <div class="delicious_title">「前菜」</div>
                        <div class="delicious_name">草莓星冰乐</div>
                        <p class="delicious_intro">每一份餐品，都是我们的匠心制作；每一个主题，都是美食生动的灵魂。食艺道针对商务人士定期推出限量午餐，温暖您的同时，更能让您体会到美食与艺术的结合。为保证您的最佳用餐体验，确保品尝到的每份餐品都是至臻享受，目前只接受用餐前一天在线订购，谢谢配合。</p>
                        <ul class="icon_list fn-right">
                            <li class="icon_item">
                                <a href="javascript:void(0);" data-img="{{ ctx.app.config.staticUrl }}/images/food_material.png" onclick="popUpFood(this)"></a>
                            </li>
                            <li class="icon_item">
                                <a href="javascript:void(0);" data-img="{{ ctx.app.config.staticUrl }}/images/food_material.png" onclick="popUpFood(this)"></a>
                            </li>
                            <li class="icon_item">
                                <a href="javascript:void(0);" data-img="{{ ctx.app.config.staticUrl }}/images/food_material.png" onclick="popUpFood(this)"></a>
                            </li>
                            <li class="icon_item">
                                <a href="javascript:void(0);" data-img="{{ ctx.app.config.staticUrl }}/images/food_material.png" onclick="popUpFood(this)"></a>
                            </li>
                        </ul>
                    </div>
                </li>
                <li class="delicious_item">
                    <div class="delicious_left">
                        <div class="swiper-container swiper-delicious">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide"><img src="{{ ctx.app.config.staticUrl }}/images/delicious_01.png"/></div>
                                <div class="swiper-slide"><img src="{{ ctx.app.config.staticUrl }}/images/delicious_02.png"/></div>
                                <div class="swiper-slide"><img src="{{ ctx.app.config.staticUrl }}/images/delicious_03.png"/></div>
                                <div class="swiper-slide"><img src="{{ ctx.app.config.staticUrl }}/images/delicious_05.png"/></div>
                                <div class="swiper-slide"><img src="{{ ctx.app.config.staticUrl }}/images/delicious_06.png"/></div>
                            </div>
                            <div class="swiper-pagination"></div>
                        </div>
                    </div>
                    <div class="delicious_right">
                        <div class="delicious_title">「前菜」</div>
                        <div class="delicious_name">草莓星冰乐</div>
                        <p class="delicious_intro">每一份餐品，都是我们的匠心制作；每一个主题，都是美食生动的灵魂。食艺道针对商务人士定期推出限量午餐，温暖您的同时，更能让您体会到美食与艺术的结合。为保证您的最佳用餐体验，确保品尝到的每份餐品都是至臻享受，目前只接受用餐前一天在线订购，谢谢配合。</p>
                        <ul class="icon_list fn-right">
                            <li class="icon_item">
                                <a href="javascript:void(0);" data-img="{{ ctx.app.config.staticUrl }}/images/food_material.png" onclick="popUpFood(this)"></a>
                            </li>
                            <li class="icon_item">
                                <a href="javascript:void(0);" data-img="{{ ctx.app.config.staticUrl }}/images/food_material.png" onclick="popUpFood(this)"></a>
                            </li>
                            <li class="icon_item">
                                <a href="javascript:void(0);" data-img="{{ ctx.app.config.staticUrl }}/images/food_material.png" onclick="popUpFood(this)"></a>
                            </li>
                            <li class="icon_item">
                                <a href="javascript:void(0);" data-img="{{ ctx.app.config.staticUrl }}/images/food_material.png" onclick="popUpFood(this)"></a>
                            </li>
                        </ul>
                    </div>
                </li>
                <li class="delicious_item">
                    <div class="delicious_left">
                        <div class="swiper-container swiper-delicious">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide"><img src="{{ ctx.app.config.staticUrl }}/images/delicious_01.png"/></div>
                                <div class="swiper-slide"><img src="{{ ctx.app.config.staticUrl }}/images/delicious_02.png"/></div>
                                <div class="swiper-slide"><img src="{{ ctx.app.config.staticUrl }}/images/delicious_03.png"/></div>
                                <div class="swiper-slide"><img src="{{ ctx.app.config.staticUrl }}/images/delicious_05.png"/></div>
                                <div class="swiper-slide"><img src="{{ ctx.app.config.staticUrl }}/images/delicious_06.png"/></div>
                            </div>
                            <div class="swiper-pagination"></div>
                        </div>
                    </div>
                    <div class="delicious_right">
                        <div class="delicious_title">「前菜」</div>
                        <div class="delicious_name">草莓星冰乐</div>
                        <p class="delicious_intro">每一份餐品，都是我们的匠心制作；每一个主题，都是美食生动的灵魂。食艺道针对商务人士定期推出限量午餐，温暖您的同时，更能让您体会到美食与艺术的结合。为保证您的最佳用餐体验，确保品尝到的每份餐品都是至臻享受，目前只接受用餐前一天在线订购，谢谢配合。</p>
                        <ul class="icon_list fn-right">
                            <li class="icon_item">
                                <a href="javascript:void(0);" data-img="{{ ctx.app.config.staticUrl }}/images/food_material.png" onclick="popUpFood(this)"></a>
                            </li>
                            <li class="icon_item">
                                <a href="javascript:void(0);" data-img="{{ ctx.app.config.staticUrl }}/images/food_material.png" onclick="popUpFood(this)"></a>
                            </li>
                            <li class="icon_item">
                                <a href="javascript:void(0);" data-img="{{ ctx.app.config.staticUrl }}/images/food_material.png" onclick="popUpFood(this)"></a>
                            </li>
                            <li class="icon_item">
                                <a href="javascript:void(0);" data-img="{{ ctx.app.config.staticUrl }}/images/food_material.png" onclick="popUpFood(this)"></a>
                            </li>
                        </ul>
                    </div>
                </li>
            </ul>
            <!--I WANT IT START-->
            <div class="reserve">
                <div class="want fn-left">
                    <a href="pay.html" id="countDown"></a>
                </div>
                <ul class="number_list fn-left">
                    <li class="number_item">0</li>
                    <li class="number_item">0</li>
                    <li class="number_item">2</li>
                    <li class="number_item">1</li>
                </ul>
                <div class="reserve-right fl"><img src="{{ ctx.app.config.staticUrl }}/img/50.png"/></div>
            </div>
            <!--I WANT IT END-->
            <!--describution start-->
            <div class="describution">
                <div class="describution_title">目前接受配送范围（上海）</div>
                <p>每一份套餐，都是我们用心的作品，它强调美味可口、合理搭配、营养丰富、富有创意、注重细节。每一份套餐，都是我们用心的作品，它强调美味可口、合理搭配、营养丰富、富有创意、注重细节。每一份套餐，都是我们用心的作品，它强调美味可口、合理搭配、营养丰富、富有创意、注重细节。</p>
                <p style="font-family: '华文仿宋';margin-top: 20px;">「 除以上商圈外，其他商圈目前暂时不接受预订，敬请谅解。」</p>
            </div>
            <!--describution end-->
        </div>
    </div>
    <!--container end-->
{% endblock %}
{#js代码#}
{% block js %}
<script src="{{ ctx.app.config.staticUrl }}/js/index.js" type="text/javascript"></script>
<script src="{{ ctx.app.config.staticUrl }}/js/countDown.js" type="text/javascript"></script>
<script>
    window.onload=function(){
        var swiperA = new Swiper('.swiper-delicious', {
            autoplayDisableOnInteraction : false,
            loop: true,
            autoplay: 3000,
            paginationClickable: true,
            pagination: '.swiper-pagination'
        });
        var swiperB = new Swiper('#food_material', {
            scrollbar: '.swiper-scrollbar',
            direction: 'vertical',
            slidesPerView: 'auto',
            mousewheelControl: true,
            freeMode: true,
            roundLengths : true, //防止文字模糊
        });
    }
</script>
{% endblock %}
